<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn1" onclick="console.log('哈哈哈哈');">点我</button>
    <button id="btn2">点我2</button>

    <script>
        var $btn = document.querySelector('#btn1');
        $btn.onclick = function() {
            console.log('再绑定一次');
        }


        var $btn2 = document.querySelector('#btn2');

        // 参数1:事件名称 参数2:监听器(监听函数) 参数3:事件模式
        $btn2.addEventListener('click', function() {
            console.log('dom二级事件绑定')
        }, false);

        // 函数也可以在外边声明
        $btn2.addEventListener('click', test, false);

        function test() {
            console.log('再绑定一次')
        }


        // 通过js触发事件
        $btn.click();


        setTimeout(function() {
            $btn2.click();
        }, 3000)
    </script>
</body>

</html>